<template>
  <div class="hello">
    <mt-header fixed title ="消息"></mt-header>
    <mt-navbar v-model="sel" class="tit">
      <mt-tab-item id="1">最新动态</mt-tab-item>
      <mt-tab-item id="2">阳光政务</mt-tab-item>
      <mt-tab-item id="3">政策法规</mt-tab-item>
      <mt-tab-item id="4">政策法规</mt-tab-item>
    </mt-navbar>

  <!-- tab-container -->
    <mt-tab-container v-model="sel" class="mylist">
      <mt-tab-container-item id="1" class="onelist">
        <!-- <mt-cell v-for="n in 3" :title="'新选项啦啦 ' + n" /> -->
        <img src="../assets/listimg.png">
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        
        <mt-cell v-for="n in 9">
          <img slot="icon" src="../assets/test1.png" width="35" height="24" overflow="hidden">
          <span>选项啦啦啦 {{n}}</span>
        </mt-cell>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <mt-cell v-for="n in 6" :title="'又是一列 ' + n" />
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <mt-cell v-for="n in 5" :title="'再来一类 ' + n" />
      </mt-tab-container-item>
    </mt-tab-container>
    <footerGuide></footerGuide> 
  </div>
</template>

<script>
import { Navbar, TabItem } from 'mint-ui';
import footerGuide from '@/components/common/footer.vue';
  export default {
    data () {
      return {
         sel:'1'
      }
    },
    components:{footerGuide},
    methods:{
      
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #26a2ff;
    color: #26a2ff;
    margin-bottom: -1px;
}
.hello{
  text-align: left;
  a[data-v-363f45c2] {
      color: #333;
  }
  .mylist{
    background-color: #f0f0f2;
    width: 100%;
    overflow: hidden;
    .onelist{
      width: 100%;margin: 0 auto;overflow: hidden;
      img{
        width: 100%;
      }
    }
  }
}

</style>
